<script setup>
import { useCategoryStore } from '@/stores/category'
import classify from '@/assets/images/classify.png';
import { computed } from 'vue'
const categoryStore = useCategoryStore()
const { categories } = storeToRefs(categoryStore)
const activeIndex = ref(0)
const secondCategories = computed(() => {
  return categories.value[activeIndex.value]?.secondLevelCategoryVOS
})
</script>
<template>
  <NavBar title="分类">
    <template #title>
      <van-search placeholder="搜索需要的商品" 
      @click="$router.push('/product-list?from=category')"></van-search>
    </template>
  </NavBar>
  <div class="category-wrapper">
    <van-sidebar v-model="activeIndex" class="sidebar">
      <van-sidebar-item
        v-for="category in categories"
        :key="category.categoryId"
        :title="category.categoryName"
      >
      </van-sidebar-item>
    </van-sidebar>
    <div class="second-category" v-if="secondCategories">
      <div v-for="secondCategory in secondCategories" :key="secondCategory.id">
        <h3 class="categoryTitle">{{ secondCategory.categoryName }}</h3>
        <div class="third-category">
          <div
            v-for="thirdCategory in secondCategory.thirdLevelCategoryVOS"
            :key="thirdCategory.categoryId"
            class="third-category-item"
            @click="$router.push('/product-list?categoryId='+thirdCategory.categoryId)"
          >
            <van-image :src="classify"></van-image>
            <span>{{ thirdCategory.categoryName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.category-wrapper {
  padding: 50px 5px;
  display: flex;
  .sidebar {
    width: 120px;
    flex-shrink: 0;
  }
  .second-category{
    padding:10px;
    width:100%;
    .third-category{
      display: flex;
      flex-wrap: wrap;
      .third-category-item{
        width:33.3%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding:5px;
        :deep(.van-image__img){
          width:30px;
        }
      }
    }
  }
}
</style>
